<template>
	<div class="storesInf commonMain">
		<div class="coMain">
			<div>
				<div class="coMainIn">
					<div class="coTitle">{{$route.params.id ? '编辑门店' : '新增门店'}}</div>
					<div class="commonForm storesForm">
						<div class="bfSection">
							<div class="bfField inline">
								<label class="">门店名称</label>
								<div class="fieldContent">
									<input type="text" class="" name="storeName" placeholder="" v-model="shopDetail.name">
								</div>
							</div>
							<div class="bfField inline">
								<label class="">营业时间</label>
								<div class="fieldContent">
									<input type="text" class="" name="storeTime" placeholder="例：10:00-22:00" v-model="shopDetail.serviceTime">
								</div>
							</div>
						</div>
						<div class="bfSection">
							<div class="bfField inline">
								<label class="">联系电话</label>
								<div class="fieldContent">
									<input type="text" class="" name="storeName" value="" maxlength="11" placeholder="请输入手机号" v-model="shopDetail.phone">
								</div>
							</div>
							<div class="bfField inline">
								<label class="">门店地址</label>
								<div class="fieldContent">
									<select name="province" v-model="shopDetail.province" @change="getCityList">
										<option value="0">省</option>
										<option v-for="item in provinceList" :value="item.id">
											{{item.name}}
										</option>
									</select>
									<select name="city" v-model="shopDetail.city" @change="getAreaList">
										<option value="0">市</option>
										<option v-for="item in cityList" :value="item.id">
											{{item.name}}
										</option>
									</select>
									<select name="area" v-model="shopDetail.area">
										<option value="0">区</option>
										<option v-for="item in areaList" :value="item.id">
											{{item.name}}
										</option>
									</select>
								</div>
							</div>
						</div>
						<div class="bfSection">
							<div class="bfField inline">
								<label class="">门店图片<span class="fcHint">最多3张图片,建议尺寸750*750</span></label>
								<div class="fieldContent uploadBtn">
									<a href="javascript:;" class="a-upload">
								    	<input type="file" name="images" id="0"  accept="image/png,image/gif,image/jpeg"  @change="uploadImage">
								    	<span v-if="!shopDetail.shopImageList[0] || !shopDetail.shopImageList[0].imgUrl">+</span>
								    	<img v-else :src="shopDetail.shopImageList[0] && shopDetail.shopImageList[0].imgUrl" />
									</a>
									<a href="javascript:;" class="a-upload">
								    	<input type="file" name="images" id="1"  accept="image/png,image/gif,image/jpeg"  @change="uploadImage">
								    	<span v-if="!shopDetail.shopImageList[1] || !shopDetail.shopImageList[1].imgUrl">+</span>
								    	<img v-else :src="shopDetail.shopImageList[1] && shopDetail.shopImageList[1].imgUrl" />
									</a>
									<a href="javascript:;" class="a-upload">
								    	<input type="file" name="images" id="2"  accept="image/png,image/gif,image/jpeg"  @change="uploadImage">
								    	<span v-if="!shopDetail.shopImageList[2] || !shopDetail.shopImageList[2].imgUrl">+</span>
								    	<img v-else :src="shopDetail.shopImageList[2] && shopDetail.shopImageList[2].imgUrl" />
									</a>
								</div>
							</div>
							<div class="bfField inline">
								<label class="">门店详细地址</label>
								<div class="fieldContent storesDescribe">
									<textarea name="proDesscribe" placeholder="" v-model="shopDetail.address"></textarea>
								</div>
							</div>
						</div>
						<div class="commBtn">
							<button type="button" class="cancelBtn" @click="$router.back()">取消</button>
							<button type="button" class="holdBtn" @click="saveShopDetail">保存</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="javascript/ecmascript6">
import fetch from '@/fetch'

export default{
  name: 'editstorescomponent',
  data () {
  	return {
  	  init: 0,
  	  provinceList: [],
  	  cityList: [],
  	  areaList: [],
  	  shopDetail: {
  	  	shopId: 0,
  	    name: '',
        serviceTime: '',
        phone: '',
        province: 0,
        provinceName: '',
        city: 0,
        cityName: '',
        area: 0,
        areaName: '',
        address: '',
        shopImageList: [{
        	imgId: 0,
            imgUrl: '',
            preImgUrl: ''
          }, {
          	imgId: 0,
            imgUrl: '',
            preImgUrl: ''
          }, {
          	imgId: 0,
            imgUrl: '',
            preImgUrl: ''
          }
        ]
  	  }
  	}
  },
  methods: {
    getAreaList () {
      let params = {
  	  	id: this.shopDetail.city
  	  }
  	  fetch.send('/merchant/getArea', params).then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.areaList = res.result.districtList
  	  	  if(this.init === 0) {
  	  	  } else {
  	  	  	this.shopDetail.area = 0
  	  	  	this.init = 1
  	  	  }
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '获取区域列表失败')
  	  	}
  	  })
    },
  	getCityList () {
  	  let params = {
  	  	id: this.shopDetail.province
  	  }
  	  fetch.send('/merchant/getCity', params).then(res => {
  	  	if (res.respCode === '000000') {
  	  	 
  	  	  this.cityList = res.result.districtList

  	  	  if(this.init === 0) {
  	  	  	this.getAreaList()
  	  	  } else {
  	  	  	this.shopDetail.city = 0
  	  	  	this.shopDetail.area = 0
  	  	  }
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '获取城市列表失败')
  	  	}
  	  })
  	},
  	getProvinceList () {
  	  fetch.send('/merchant/getProvince').then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.provinceList = res.result.districtList
  	  	  if(this.init === 0) {
  	  	  	this.getCityList()
  	  	  } else {
  	  	  	this.shopDetail.area = 0
  	  	  }
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '获取省份列表失败')
  	  	}
  	  })
  	},
  	saveShopDetail () {
  	  if (!this.shopDetail.shopImageList || !this.shopDetail.shopImageList[0] || !this.shopDetail.shopImageList[0].imgUrl) {
  	  	this.$noty.warning('必须上传第一张图片')
  	  	return
  	  }
  	  let uri = '/merchant/saveShopDetail'
  	  if (this.$route.params.id) {
  	  	uri = '/merchant/updateShopDetail'
  	  }
  	  fetch.send(uri, this.shopDetail).then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.$router.back()
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '保存门店信息失败')
  	  	}
  	  })
  	},
  	getShopDetail () {
  	  let params = {
  	  	shopId: this.$route.params.id
  	  }
  	  fetch.send('/merchant/getShopDetail', params).then(res => {
  	  	if (res.respCode === '000000') {
  	  	  this.shopDetail = res.result
  	  	  this.getProvinceList()
  	  	} else {
  	  	  this.$noty.error(res.respDesc ? res.respDesc : '获取门店详情失败')
  	  	}
  	  })
  	},
  	uploadImage (e) {
  	  let file = e.target.files[0]
  	  let index = e.target.id
  	  let params = new FormData()
      if(!file || !file.name) {
      	console.log('用户取消上传')
      	return
      }
  	  params.append('file',file,file.name)
      params.append('chunk','0')
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      }
      fetch.send('/merchant/uploadImg', params, config).then(res => {
      	if (res.respCode === '000000') {
      	  let oldValue = this.shopDetail.shopImageList[index]
      	  let value = {
      	  	imgUrl: res.result.img,
      	  	preImgUrl: res.result.preImg,
      	  	imgId: oldValue.imgId ? oldValue.imgId : 0
      	  }
      	  this.$set(this.shopDetail.shopImageList, index, value)
      	} else {
      	  this.$noty.error(res.respDesc ? res.respDesc : '上传门店图片失败')
      	}
      })
  	}
  },
  created () {
  	if(this.$route.params.id) {
  	  this.getShopDetail()
  	} else {
  	  this.getProvinceList()
  	}
  }
}
</script>
<style type="text/css" scoped>
	.commonMain{
		width: 100%;
		float: none;
		overflow: hidden;
		padding: 0;
	}
	.coMain{
		height: 100%;
	}
	.coMain>div{
		background: #fff;
		border-right: 1px solid #F2F2F2;
		height: 100%;
		overflow: auto;
	}
	.coMainIn{
		padding: 50px 30px;
	}
	.coTitle{
		color: #333;
		font-size: 20px;
		letter-spacing: 1px;
		margin-bottom: 30px;
		padding-bottom: 25px;
	}
	.fcHint{
		color: #8f8f8f;
		font-size: 14px;
		vertical-align: bottom;
		margin-left: 5px;
	}
	.fieldContent .fcHint{
		line-height: 1.2;
	}
	.commonForm .fcHint{
		color: #8f8f8f;
		font-size: 12px;
		margin-top: 15px;
	}
	.bfSection{
		min-width: 950px;
		margin-bottom: 30px;
	}
	.bfField{
		margin-bottom: 30px;
		position: relative;
	}
	.bfField.inline{
		display: inline-block;
		margin-bottom: 0;
		margin-right: 15px;
	}
	.commonForm .bfField{
		margin-right: 20px;
	}
	.commonForm .bfField.inline{
		vertical-align: top;
		width: 450px;
	}
	.bfField label{
		color: #333;
		font-weight: 600;
		letter-spacing: 1px;
	}
	.bfField.inline label{
		display: block;
		margin-bottom: 10px;
	}
	.commonForm .bfField label{
		color: #333;
		display: inline-block;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 8px;
	}
	.commonForm .bfField>label{
		display: block;
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.fieldContent{
		flex: 1 1 0%;
		line-height: 20px;
		text-align: left;
	}
	.bfField input[type=number], .bfField input[type=password], .bfField input[type=text], .bfField textarea{
		border: 1px solid #dedede;
		border-radius: 4px;
		color: #555;
		line-height: 22px;
		padding: 5px 8px;
		outline: none;
	}
	.commonForm .bfField.inline input[type=text],.commonForm .bfField.inline select{
		box-sizing: border-box;
		width: 100%;
	}
	.commonForm .bfField.inline select{
		width: 120px;
		height: 34px;
		border-color: #dedede;
		border-radius: 4px;
		margin-left: 18px;
		color: #ccc;
		padding: 5px;
		appearance: none;
		background: url('images/arrowBtn.png') no-repeat scroll right 8px top 13px transparent;
		background-size: 15px 10.5px;
		outline: none;
	}
	.commonForm .bfField.inline select:first-child{
		margin: 0;
	}
	.commonForm .bfField .uploadBtn a{
		float: left;
		position: relative;
		overflow: hidden;
		text-align: center;
		width: 130px;
		height: 130px;
		border: 1px dashed #dedede;
		text-align: center;
		line-height: 110px;
		color: #dedede;
		font-size: 140px;
		margin-left: 30px;
		box-sizing: border-box;
	}
	.commonForm .bfField .uploadBtn img {
		padding: 5px;
		width: 120px;
		height: 120px;
	}
	.commonForm .bfField .uploadBtn a:first-child{
		margin-left: 0;
	}
	.commonForm .bfField .uploadBtn a input{
		width: 130px;
		height: 130px;
		overflow: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	.fieldContent textarea,.fieldContent input[type="text"]{
		width: 100%;
		box-sizing: border-box;
		resize: none;
	}
	.commonForm .fieldContent textarea,.commonForm .fieldContent input[name="phone"]{
		width: 450px;
	}
	.commonForm .storesDescribe textarea{
		height: 130px;
	}
	.commonForm .fieldContent.proPrice{
		overflow: hidden;
		margin-top: 10px;
	}
	.commonForm .fieldContent.proPrice>div{
		width: 270px;
		float: left;
		font-size: 14px;
	}
	.commonForm .fieldContent.proPrice>div.deleteIt{
		width: 100px;
	}
	.commonForm .fieldContent.proPrice>div input{
		width: 198px;
		margin-right: 5px;
	}
	.commonForm .fieldContent.proPrice>div a{
		display: inline-block;
		color: #f54d4e;
		line-height: 30px;
		margin-top: 30px;
	}
	.commonForm .fieldContent>div.addBtn button{
		width: 198px;
		color: #f54d4e;
		font-size: 16px;
		line-height: 34px;
		letter-spacing: 1px;
		border: 1px solid #f54d4e;
		background: #fff;
		border-radius: 5px;
		outline: none;
		margin-top: 20px;
	}
	.commonForm .fieldContent .showDescription{
		position: relative;
	}
	.commonForm .fieldContent .showDescription input[type='checkbox']{
		visibility: hidden;
		width: 20px;
		height: 20px;
	}
	.commonForm .fieldContent .showDescription label.labelTxt{
		display: inline-block;
		font-size: 14px;
		color: #666;
		line-height: 20px;
		vertical-align: top;
		margin: 0;
	}
	.commonForm .fieldContent .showDescription label.labelBox{
		cursor: pointer;
		width: 20px;
		height: 20px;
		background: url('images/checkbox.png') no-repeat 100% 100% #fff;
		position: absolute;
		top: 0;
	    left: 0;
		margin: 0;
	}
	.commonForm .fieldContent .showDescription label.labelBox:after {
	    opacity: 0;
	    content: '';
	    width: 20px;
		height: 20px;
	    position: absolute;
	    background: url('images/checkBoxIn.png') no-repeat transparent;
	    top: 0;
	    left: 0;
	}
	.commonForm .fieldContent .showDescription input[type='checkbox']:checked + label.labelBox:after {
	    opacity: 1;
	}
	.commonForm .fieldContent div.addImg a{
		position: relative;
		display: block;
		width: 198px;
		height: 36px;
		text-align: center;
		color: #f54d4e;
		font-size: 16px;
		line-height: 34px;
		letter-spacing: 1px;
		border: 1px solid #f54d4e;
		background: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		margin: 20px 0;
	}
	.commonForm .fieldContent .addImg a input{
		display: block;
		width: 198px;
		height: 36px;
		overflow: hidden;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	.commonForm .fieldContent .addImg .addDes{
		width: 900px;
		height: 130px;
		border: 1px solid #dedede;
		border-radius: 4px;
	}
	.commonForm .commBtn button{
		width: 198px;
		height: 44px;
		color: #fff;
		border-radius: 4px;
		background: #F54D4F;
		border: none;
		font-size: 18px;
		letter-spacing: 3px;
		line-height: 44px;
		margin-left: 15px;
		position: relative;
		outline: none;
		cursor: pointer;
	}
	.commonForm .commBtn button.cancelBtn{
		border: 1px solid #f54d4e;
		background: #fff;
		color: #f54d4e;
		margin-left: 0;
	}
</style>